<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inputField {
            display: block;
            margin-bottom: 5px;
        }
        .inputField>* {
            display: inline-block;
            vertical-align: text-top;
        }
        table {
            border-collapse:collapse;
        }
        table tr td, table tr th {
            border: 1px solid gray;
            padding: 4px 5px;
        }
        table thead {
            background: pink;
        }
    </style>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <hr/>
    <section>
        <label class="inputField" for="tb_input">
            <span>普通文本框</span>
            <input id="tb_input" type="text" placeholder="请输入内容" autocomplete="off"/>
        </label>
        <label class="inputField" for="tb_textarea">
            <span>多行文本框</span>
            <textarea style="height: 80px;width: 260px;" placeholder="请输入内容" id="tb_textarea"></textarea>
        </label>
        <label class="inputField" for="tb_select">
            <span>下拉框</span>
            <select  placeholder="请选择" id="tb_select">
                <option value="op_1">选项1</option>
                <option value="op_2">选项2</option>
                <option value="op_3">选项3</option>
                <option value="op_4">选项4</option>
            </select>
        </label>
        <label class="inputField">
            <span>按钮</span>
            <input  type="button" value="Input按钮"/>
            <button>Button按钮</button>
        </label>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ul>
        <ol>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
        </ol>
        <table >
            <thead>
                <tr>
                    <th>项目1</th>
                    <th>项目2</th>
                    <th>项目3</th>
                    <th>项目4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>行1_数值1</td>
                    <td>行1_数值2</td>
                    <td>行1_数值3</td>
                    <td>行1_数值4</td>
                </tr>
                <tr>
                    <td>行2_数值1</td>
                    <td>行2_数值2</td>
                    <td>行2_数值3</td>
                    <td>行2_数值4</td>
                </tr>
            </tbody>
        </table>
    </section>
</body>
</html>